<template>
  <div class="timeLine">
      <time-line-item
        v-for="(item, index) in sourceData"
        :key="'item_'+index"
        :content='item.content'
        :timestamp='item.timestamp'
        :hideTimestamp='true'
        :tampText='index+1+""'
        :isActive='item.isActive'
      ></time-line-item>
  </div>
</template>

<script>
import timeLineItem from './timeLineItem.vue'
export default {
  name: "timeLine",
  data() {
    return {
        sourceData: []
    };
  },
  components: {
    timeLineItem
  },
  created() {
      this.sourceData = [
          {
              content: '开始创建',
              timestamp: '2021-11-01',
              isActive: true
          }, {
              content: '创建成功',
              timestamp: '2021-11-03',
              isActive: true
          }, {
              content: '提交审核',
              timestamp: '2021-11-04',
              isActive: true
          }, {
              content: '审核中...',
              timestamp: '2021-11-06',
              isActive: false
          }, {
              content: '通过审核',
              timestamp: '2021-11-09',
              isActive: false
          }, {
              content: '活动按期开始',
              timestamp: '2021-11-11',
              isActive: false
          },
      ]
  }
};
</script>

<style scoped>
.timeLine {
    display: flex;
    flex-direction: row;
    margin-left: 50px;
}
</style>